<template>
  <div class="xtx-home-page">
    <div class="home-entry">
      <div class="container">
        <!-- 左侧分类 -->
        <home-category />
        <div class="home-banner">
        <!-- 轮播图 -->
        <xtx-carousel :sliders="sliders"></xtx-carousel>
        </div>
       <!-- 新鲜好物 -->
       <homeNew></homeNew>
       <!-- 人气推荐 -->
       <homeHot></homeHot>
       <!-- 热门品牌 -->
       <homeBrand></homeBrand>
      </div>
    </div>
  </div>
</template>

<script>
import homeCategory from './components/homeCategory.vue'
import { ref, onMounted } from 'vue'
import { getBannerListAPI } from '@/api'
import homeNew from './components/homeNew.vue'
import homeHot from './components/homeHot.vue'
import homeBrand from './components/homeBrand.vue'
export default {
  name: 'xtx-home',
  components: {
    homeCategory,
    homeNew,
    homeHot,
    homeBrand
  },
  setup () {
    const sliders = ref([])
    onMounted(async () => {
      const res = await getBannerListAPI({ distributionSite: 1 })
      sliders.value = res.result
    })
    return {
      sliders
    }
  }
}
</script>

<style lang="less" scoped>
  .home-banner {
    width: 1240px;
    height: 500px;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 98;
    .xtx-carousel {
      width: 100%;
      height: 100%;
      :deep(.carousel-btn.prev) {
        left: 270px;
      }
      :deep(.carousel-indicator) {
        padding-left: 250px;
      }
    }
  }
  </style>
